<!DOCTYPE html>
<!--conf
<sample in_favorites="true">
              <product version="4.0b1" edition="std"/>
                     <modifications>
                            <modified date="130911"/>
                     </modifications>
               </sample>
-->
<html>
<head>
	<title>Complex tabbars orientation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		
		var tabbars = [];
		var tabbarsData = [
			{ settings: { align : "left" }, tabs: [ { id: "dexter", text: "Dexter", active__: 1 ,close: 1}, { id: "last_resort", text: "Last Resort"} ] },
			{ settings: { align : "right" }, tabs: [ { id: "bates_motel", text: "Bates Motel", close: 1 }, { id: "the_following", text: "The Following", close: 1, selected: 1} ] }
		];
		
		function initTabbar(container, mode, index) {
			var tabbar = new dhtmlXTabBar(container, mode);
			
			tabbar.enableContentZone(false);
			tabbar.attachEvent("onSelect",function(id){
				for (var i=0; i<tabbars.length; i++) {
					if (tabbars[i] != this) tabbars[i].setTabInActive();
				}
				document.getElementById("m_text").innerHTML = "Selected tab: "+this.cells(id).getText();
				return true;
			});
			
			tabbar.loadStruct(tabbarsData[index]);
			
			return tabbar;
		}
		
		function doOnLoad() {
			tabbars[0] = initTabbar("tabbar_top", "top", 0);
			tabbars[1] = initTabbar("tabbar_bottom", "bottom", 1);
		}
		
	</script>
	
</head>
<body onload="doOnLoad();">
	
	<div style="position: relative; width: 450px; ">
		<div id="tabbar_top" style=" height: 28px; position: relative;"></div>
		<div id="m_zone" style=" height: 200px; overflow: hidden; position: relative; border-left: 1px solid #a4bed4; border-right: 1px solid #a4bed4;">
			<div id="m_text" style="padding: 10px; font-family: Tahoma; font-size: 11px;"></div>
		</div>
		<div id="tabbar_bottom" style=" height: 28px; position: relative;"></div>
	</div>
	
	<p>enableContentZone method allows to hide content zone, so few tabbars can emulate single content zone</p>
	
</body>
</html>
